<template>
  <div class="app-container">

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
        >新增商品
        </el-button
        >
      </el-col>
    </el-row>

    <el-form
      :model="queryParams"
      ref="queryForm"
      :inline="true"
      v-show="showSearch"
      label-width="80px"
    >
      <el-form-item label="商品ID:">
        <el-input
          v-model="queryParams.goodsId"
          placeholder="请输入商品ID"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="商品名称:">
        <el-input
          v-model="queryParams.goodsName"
          placeholder="请输入商品名称"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          type="cyan"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
        >搜索
        </el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
        >重置
        </el-button
        >
      </el-form-item>
    </el-form>
    <el-table
      v-loading="loading"
      :data="goodsList"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" align="center"/>
      <el-table-column label="商品ID" align="center" prop="goodsId"/>
      <el-table-column label="商品信息" align="center" width="400px">
        <template slot-scope="scope">
          <el-image
            :src="requestUrl + scope.row.mainImg"
            style="
              width: 140px;
              height: 100px;
              float: center;
              display: inline-block;
            "
          />
          <span
            style="
              float: center;
              vertical-align: middle;
              display: inline-block;
              line-height: 100px;
            "
          >{{ scope.row.goodsName }}</span
          >
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="center" prop="createTime"/>
      <el-table-column label="初始售价" align="center" prop="price"/>
      <el-table-column label="当前售价" align="center" prop="currentPrice"/>
      <el-table-column label="系统库存" align="center" prop="adminStock"/>
      <el-table-column label="上架库存" align="center" prop="userStock"/>
      <el-table-column label="总库存" align="center" prop="totalStock"/>
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
<!--          <el-button-->
<!--            size="mini"-->
<!--            type="text"-->
<!--            icon="el-icon-view"-->
<!--            @click="handleView(scope.row)"-->
<!--            v-hasPermi="['admin:goodsInfo:query']"-->
<!--          >详情-->
<!--          </el-button>-->
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
          >增加系统库存
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加商品 -->
    <el-dialog
      :title="title"
      :visible.sync="open2"
      width="800px"
      append-to-body
      @close="cancel"
    >
      <el-form ref="form" :rules="rules" :model="form" label-width="120px">
        <el-form-item label="商品名称" prop="goodsName">
          <el-input v-model="form.goodsName" placeholder="商品名称"/>
        </el-form-item>
        <el-form-item label="初始售价" prop="price">
          <el-input v-model="form.price" placeholder="初始售价"/>
        </el-form-item>
        <el-form-item label="系统库存" prop="stock">
          <el-input v-model="form.stock" placeholder="系统库存"/>
        </el-form-item>
        <el-form-item label="商品主图图">
          <imageUpload :limit="1" :file-size="3" v-model="form.mainImg"/>
        </el-form-item>
        <el-form-item label="商品详情图">
          <el-upload
            :limit="9"
            :action="upload.url"
            :headers="upload.headers"
            :file-list="fileList"
            :on-remove="handleRemove"
            :on-success="handleSuccess"
            list-type="picture-card"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt=""/>
          </el-dialog>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确定</el-button>
        <el-button @click="cancel2">取消</el-button>
      </div>
    </el-dialog>

    <!-- 添加商品 -->
    <el-dialog
      :title="title"
      :visible.sync="open3"
      width="500px"
      append-to-body
      @close="cancel"
    >
      <el-form ref="editForm" :model="editForm" label-width="120px">
        <el-form-item label="系统库存" prop="stock">
          <el-input v-model="editForm.stock" placeholder="系统库存"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm3">确定</el-button>
        <el-button @click="cancel3">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {listGoodsInfo,saveGoodsInfo,editGoodsInfo} from "@/api/admin/activityGoodsInfo";
import {getToken} from "@/utils/auth";

export default {
  name: "activityGoods",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 视频管理表格数据
      goodsList: [],
      detailImgList: [],
      imgList: [],
      //上传参数
      upload: {
        // 是否禁用上传
        isUploading: false,
        // 设置上传的请求头部
        headers: {Authorization: "Bearer " + getToken()},
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/admin/upload/uploadImg/3",
      },
      resource: "1",
      dialogImageUrl: "",
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open1: false,
      open2: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10
      },
      type: "",
      form: {},
      dialogVisible: false,
      //表单校验n
      rules: {
        goodsName: [{required: true, message: "请输入商品名称", trigger: "blur"}],
        price: [{required: true, message: "请输入商品初始售价", trigger: "blur"}],
        stock: [{required: true, message: "请输入商品系统库存", trigger: "blur"}]
      },
      imgUrl: "", //主图
      requestUrl: this.$img.requestUrl,
      previewMainImgList: [],
      previewDetailImgList: [],
      fileList: [],
      editForm:{},
      open3:false

    };
  },

  created() {
    this.getList();
  },

  methods: {
    /** 查询商品分类列表 */
    getList() {
      this.loading = true;
      listGoodsInfo(this.queryParams).then((response) => {
        this.goodsList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },


    // 新增商品
    handleAdd() {
      this.fileList = [];
      this.detailImgList = [];
      this.form = {};
      this.open2 = true;
      this.title = "新增商品";
    },

    // 新增商品
    handleUpdate(row) {
      this.editForm = {};
      this.editForm.goodsId = row.goodsId;
      this.open3 = true;
      this.title = "增加系统商品库存";
    },

    // 提交
    submitForm() {
      this.$refs["form"].validate((valid) => {
        // 新增
        if (valid) {
          this.form.detailImgList = this.detailImgList;
          saveGoodsInfo(this.form).then((res) => {
            if (res.code === 200) {
              this.msgSuccess("提交成功");
              this.cancel2();
              this.getList();
            }
          });
        }
      });
    },

    cancel2(){
      this.detailImgList = [];
      this.fileList = [];
      this.open2 = false;
      this.reset2();
    },

    reset2() {
      this.from = {};
      this.resetForm("from");
    },

    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },

    // 取消按钮
    cancel() {
      this.reset();
      this.open = false;
      this.open1 = false;
      this.open2 = false;
    },

    //表单重置
    reset() {
      this.form = {};
      this.resetForm("form");
    },

    /** 搜索按钮操作 */
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },

    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    handleRemove(file, fileList) {
      const that = this;
      var imageUrl = "";
      if(file.response){
        imageUrl = file.response.data.list[0].filePath;
      }else {
        var url  = file.url;
        var requestUrl  = that.requestUrl;
        imageUrl = url.indexOf(requestUrl) != -1 ? url.replace(requestUrl,"") : url;
      }
      const imageList = that.detailImgList;
      that.detailImgList = imageList.filter(function (item, index) {
        return item !== imageUrl;
      });
    },
    // 文件上传成功处理
    handleSuccess(response, file, fileList) {
      this.upload.isUploading = false;
      this.detailImgList.push(response.data.list[0].filePath);
      this.msgSuccess(response.msg);
    },
    submitForm3() {
      this.$refs["editForm"].validate((valid) => {
        // 新增
        if (valid) {
          editGoodsInfo(this.editForm).then((res) => {
            if (res.code === 200) {
              this.msgSuccess("提交成功");
              this.cancel3();
              this.getList();
            }
          });
        }
      });
    },

    cancel3(){
      this.open3 = false;
      this.reset3();
    },
    //表单重置
    reset3() {
      this.editForm = {};
      this.resetForm("editForm");
    },
  },
};
</script>
